<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>列表</title>

    <!-- CSS -->
    <link rel="stylesheet" href="../../static/plugins/layui/css/layui.css" th:href="@{plugins/layui/css/layui.css}"/>
    <link rel="stylesheet" href="../../static/mycss/common.css" th:href="@{mycss/main.css}"/>

</head>
<body>

<div style="padding:10px;">

    <blockquote class="layui-elem-quote">
        <div class="layui-inline">
            <button class="layui-btn layui-bg-blue" id="lander_add">新增</button>
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-btn-danger" id="lander_batchDel">删除</a>
        </div>
        <div class="layui-inline">
            <div class="layui-form-mid layui-word-aux"> <span style="color: red"> （注：输入需要注释的内容...）</span></div>
        </div>
        <div class="layui-inline" style="float: right">
            <div class="layui-inline" >
                <div class="layui-input-inline">
                    <input type="text" class="layui-input search-condition" id="condition1" placeholder="用户名" />
                </div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input search-condition" id="condition2" placeholder="编号" />
                </div>
                <button class="layui-btn " id="lander_doSearch">查询</button>
            </div>
            <div class="layui-inline">
                <button class="layui-btn " id="lander_moreSearchs">更多</button>
            </div>
        </div>
    </blockquote>

    <div class="layui-row">
        <table id="lander_list" lay-filter="lander_list_filter"></table>
    </div>

</div>

<script type="text/html" id="lander_list_option">
    <a class="layui-btn layui-btn-xs color-green" lay-event="lander_update">修改</a>
</script>
<script type="text/html" id="lander_list_password">
    <span> ****** </span>
</script>

<!-- JS -->
<script type="text/javascript" src="../../static/plugins/layui/layui.js" th:src="@{plugins/layui/layui.js}"></script>
<script>
    layui.use(['table', 'laydate', 'layer','laypage'], function () {
        var $ = layui.$;
        var table = layui.table;
        var laydate = layui.laydate;
        var layer = layui.layer;

        //渲染table表格（方法级渲染）
        table.render({
            elem: '#lander_list',
            url: 'landerList', //数据接口
            page: true, //开启分页
//            limit: 20,//每页默认显示的数量,默认10
            cols: [[ //表头
                {type: 'numbers', width: '5%'},
                {type: 'checkbox', width: '5%'},
                {field: 'number', title: '编号', align: 'center', width: '15%', sort: true},
                {field: 'name', title: '用户名', align: 'center', width: '15%'},
                {field: 'loginName', title: '登录名', align: 'center', width: '20%'},
                {field: 'password', title: '密码', align: 'center', width: '20%',templet: "#lander_list_password"},
                {field: 'right', title: '操作', align: 'center', width: '20%', templet: "#lander_list_option"}
            ]],
            id: 'lander_list_table',
            skin: 'nob ', //表格风格
            even: true, //开启隔行背景
            done: function (res, curr, count) {
                //res为接口返回的信息，curr为当前页码，count为数据总量
                table.cache["currentPage"]=curr;
                /*<![CDATA[*/
                for (var i = 0; i < res.data.length; i++) {
                    //双击事件
                    $("table.layui-table").find("tr[data-index=" + i + "]").on('dblclick', function () {
                        alert("出发双击事件："+(res.data)[$(this).attr("data-index")].uuid);
                    });
                }
                /*]]>*/
            }
        });

        //监听行内按钮
        table.on('tool(lander_list_filter)', function (obj) {
            var data = obj.data; //获得当前行数据

            if (obj.event === 'lander_update') {
                layer.open({
                    type: 2,
                    id: 'lander_update_layer',
                    title: '编辑',
                    shadeClose: false,
                    maxmin: false, //开启最大化最小化按钮
                    area: ['800px', '300px'],
                    content: 'tolanderUpdate',
                    success: function(layero, index){
                        var body = layer.getChildFrame('body', index);
                        body.find('input[name="uuid"]').val(data.uuid);//将选中行的uuid传到弹出层表单
                    },
                    end: function () { //关闭弹出层后回调函数
                        //关闭修改页面后 重载table
                        table.reload('lander_list_table', {
                            page: {
                                curr: table.cache["currentPage"] //重载当前页
                            }
                        });
                    }
                });
            } 

        });

        //查询
        $('#lander_doSearch').on('click', function () {
            //重载table
            table.reload('lander_list_table', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: { //查询条件
                        condition1: $('#condition1').val(),
                        condition2: $('#condition2').val()
                }
            });
        });

        //新增
        $('#lander_add').on('click', function () {
            layer.open({
                type: 2,
                id:'lander_add_layer',
                title: '新增',
                shadeClose: false,
                maxmin: false, //开启最大化最小化按钮
                area: ['800px', '300px'],
                content: 'tolanderAdd',
                success: function(layero, index){//弹出层打开后回调函数
                },
                end: function () { //弹出层销毁后回调函数
                    //重载table
                    table.reload('lander_list_table', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                }
            });
        });

        //删除（批量）
        $('#lander_batchDel').on('click', function () {
            var checkStatus = table.checkStatus('lander_list_table');//选中行
            var rowData = checkStatus.data;//选中行数据
            /*<![CDATA[*/
            if(rowData.length < 1){
                layer.msg('请至少选择一条数据',{time:1500});
            }else{
                layer.confirm('确定要删除么？',{icon: 3, title:'提示'}, function (index) {
                    //封装选中行 id
                    ids = [];
                    $.each(rowData,function(i,obj){
                        ids.push(obj.uuid);
                    });
                    //ajax 调用后台
                    $.ajax({
                        url:'landerDelete',
                        type: 'post',
                        data:{ids:ids.toString()},
                        dataType:'text',//服务器返回的数据类型。
                        success: function(result) {
                            layer.msg("删除成功",{icon:1,time:1000});
                            //重载table
                            table.reload('lander_list_table', {
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            });
                        },
                        error:function(response){
                            layer.msg("返回值出错",{icon:5,time:1000});
                        }
                    });

                    layer.close(index);
                });

            }
            /*]]>*/
        });



        //查询输入框提示:上右下左四个方向，通过1-4进行方向设定
        $(".search-condition").on({
            'focus': function () {
                var cont= $(this).attr("placeholder");
                layer.tips(cont+'', this, {
                    tips: [4, '#d8bfd8'],
                    time: 0
                });
            },
            'blur': function () {
                layer.close(layer.tips());
            }
        });

        //日期框渲染，同时绑定多个输入框
        lay('.date').each(function () {
            laydate.render({
                elem: this,
                trigger: 'click',
                format: 'yyyy-MM-dd'
            });
        });
        //日期框渲染，（日期范围格式）
        laydate.render({
            elem: '.date_extent',
            range: true
        });

        //查询条件
        $('#lander_moreSearchs').on('click', function () {
            layer.open({
                type: 2,
                id:'lander_moreSearchs_layer',
                title: '查询条件',
                content: 'toLanderSearchBox',
                area: ['240px', '385px'],
                offset: 'rt',
                resize:false,//是否允许拉伸
                maxmin: false, //开启最大化最小化按钮
                shadeClose: false,
                shade : 0,
                success: function(layero, index){//打开弹出层后回调函数
                    var body = layer.getChildFrame('body', index);
                    body.find('#searchBox_doSearch').on('click', function () {
                        //重载table
                        table.reload('lander_list_table', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            },
                            where: {
                                    condition1: body.find('#condition1').val(),
                                    condition2: body.find('#condition2').val(),
                                    condition3: body.find('#condition3').val(),
                                    condition4: body.find('#condition4').val(),
                                    condition5: body.find('#condition5').val()
                            }
                        });
                        //关闭查询框
                        layer.close(index);
                    });
                }
            });
        });

    });
</script>
</body>
</html>